<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>

<div class="index_header">
    <a href="#" class="index_header_icon1"><img src="images/扫一扫.png"></a>
    <div class="index_search">
        <a href="#">
            <i class="fa fa-search"></i>
            <span>想买什么车</span>
        </a>
    </div>
    <a href="#"><i class="fa fa-comment-o index_header_icon2"></i></a>
    <div class="clearfix"></div>
</div>

<div class="index_body_content">
    <div class="swiper-container index_top_slide" id="index_top_slide">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#"><img src="images/car1.jpg"></a>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="images/car1.jpg"></a>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="images/car1.jpg"></a>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <div class="index_new_car">
        <div class="index_new_car_title">
            <span>新车</span>
        </div>
        <div class="index_new_car_brand">
            <div class="new_car_brand">
                <a href="#" class="car_img_span">
                    <img src="images/brand-41.png">
                    <span>大众</span>
                </a>
                <a href="#" class="first_pay">
                    首付1万
                </a>
            </div>
            <div class="new_car_brand">
                <a href="#" class="car_img_span">
                    <img src="images/brand-29.png">
                    <span>标致</span>
                </a>
                <a href="#" class="first_pay">
                    1~2万
                </a>
            </div>
            <div class="new_car_brand">
                <a href="#" class="car_img_span">
                    <img src="images/brand-27.png">
                    <span>本田</span>
                </a>
                <a href="#" class="first_pay">
                    2~3万
                </a>
            </div>
            <div class="new_car_brand">
                <a href="#" class="car_img_span">
                    <img src="images/brand-53.png">
                    <span>福特</span>
                </a>
                <a href="#" class="first_pay">
                    3~4万
                </a>
            </div>
            <div class="new_car_brand">
                <a href="#" class="car_img_span">
                    <img src="images/brand-30.png">
                    <span>别克</span>
                </a>
                <a href="#" class="first_pay">
                    4~5万
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="swiper-container first_pay_slide" id="first_pay_slide">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="no_first_pay">
                    <a href="#">
                        <div class="no_first_pay_title">
                                <span>免首付</span>
                            </div>
                        <div class="no_first_pay_content">
                                <div class="no_first_pay_title_left">
                                    <div class="no_first_pay_title_left_content">
                                        <div><span class="no_first_pay_car_name">标致2008</span></div>
                                        <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                                        <div>
                                            <span class="no_first_pay_car_former_pay">首付1.18万</span>
                                            <span class="no_first_pay_car_now_pay">月供2798元</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="no_first_pay_title_right">
                                    <img src="images/car7.jpg">
                                </div>
                                <div class="clearfix"></div>
                            </div>
                    </a>
                    <div class="half_first_pay">
                        <div class="half_first_pay_part">
                                <a href="#">
                                    <div class="half_first_pay_title">
                                        <span>首付半价</span>
                                    </div>
                                    <div class="half_first_pay_content">
                                        <img src="images/car7.jpg">
                                        <span>别克英朗</span>
                                        <span>首付1.33万</span>
                                        <span>月供2998元</span>
                                    </div>
                                </a>
                            </div>
                        <div class="half_first_pay_part">
                                <a href="#">
                                    <div class="half_first_pay_title">
                                        <span>首付半价</span>
                                    </div>
                                    <div class="half_first_pay_content">
                                        <img src="images/car7.jpg">
                                        <span>别克英朗</span>
                                        <span>首付1.33万</span>
                                        <span>月供2998元</span>
                                    </div>
                                </a>
                            </div>
                        <div class="half_first_pay_part">
                                <a href="#">
                                    <div class="half_first_pay_title">
                                        <span>首付半价</span>
                                    </div>
                                    <div class="half_first_pay_content">
                                        <img src="images/car7.jpg">
                                        <span>别克英朗</span>
                                        <span>首付1.33万</span>
                                        <span>月供2998元</span>
                                    </div>
                                </a>
                            </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="half_first_pay">
                    <div class="half_first_pay_part">
                        <a href="#">
                            <div class="half_first_pay_title">
                                <span>首付半价</span>
                            </div>
                            <div class="half_first_pay_content">
                                <img src="images/car7.jpg">
                                <span>别克英朗</span>
                                <span>首付1.33万</span>
                                <span>月供2998元</span>
                            </div>
                        </a>
                    </div>
                    <div class="half_first_pay_part">
                        <a href="#">
                            <div class="half_first_pay_title">
                                <span>首付半价</span>
                            </div>
                            <div class="half_first_pay_content">
                                <img src="images/car7.jpg">
                                <span>别克英朗</span>
                                <span>首付1.33万</span>
                                <span>月供2998元</span>
                            </div>
                        </a>
                    </div>
                    <div class="half_first_pay_part">
                        <a href="#">
                            <div class="half_first_pay_title">
                                <span>首付半价</span>
                            </div>
                            <div class="half_first_pay_content">
                                <img src="images/car7.jpg">
                                <span>别克英朗</span>
                                <span>首付1.33万</span>
                                <span>月供2998元</span>
                            </div>
                        </a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="half_first_pay">
                    <div class="half_first_pay_part">
                        <a href="#">
                            <div class="half_first_pay_title">
                                <span>首付半价</span>
                            </div>
                            <div class="half_first_pay_content">
                                <img src="images/car7.jpg">
                                <span>别克英朗</span>
                                <span>首付1.33万</span>
                                <span>月供2998元</span>
                            </div>
                        </a>
                    </div>
                    <div class="half_first_pay_part">
                        <a href="#">
                            <div class="half_first_pay_title">
                                <span>首付半价</span>
                            </div>
                            <div class="half_first_pay_content">
                                <img src="images/car7.jpg">
                                <span>别克英朗</span>
                                <span>首付1.33万</span>
                                <span>月供2998元</span>
                            </div>
                        </a>
                    </div>
                    <div class="half_first_pay_part">
                        <a href="#">
                            <div class="half_first_pay_title">
                                <span>首付半价</span>
                            </div>
                            <div class="half_first_pay_content">
                                <img src="images/car7.jpg">
                                <span>别克英朗</span>
                                <span>首付1.33万</span>
                                <span>月供2998元</span>
                            </div>
                        </a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <div class="new_product">
        <div class="index_new_car_title">
            <span>新品上架</span>
        </div>
        <div class="index_new_car_container">
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon">new</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                </a>
            </div>
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon">new</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                </a>
            </div>
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon">new</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                </a>
            </div>
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon">new</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="new_product">
        <div class="index_new_car_title">
            <span>新车热销</span>
        </div>
        <div class="index_new_car_container">
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon hot_icon">hot</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                    <span class="new_car_flagtip">商务待客的不二之选</span>
                </a>
            </div>
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon hot_icon">hot</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                    <span class="new_car_flagtip">商务待客的不二之选</span>
                </a>
            </div>
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon hot_icon">hot</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                    <span class="new_car_flagtip">商务待客的不二之选</span>
                </a>
            </div>
            <div class="index_new_car_option">
                <a href="#">
                    <span class="index_new_car_option_new_icon hot_icon">hot</span>
                    <img src="images/car7.jpg">
                    <div><span class="no_first_pay_car_name">标致2008</span></div>
                    <div><span class="no_first_pay_car_info">2015款1.6L 自动玩酷智行版自动玩酷智行版</span></div>
                    <div>
                        <span class="no_first_pay_car_former_pay new_former_pay">首付1.18万</span>
                        <span class="no_first_pay_car_now_pay">月供2798元</span>
                    </div>
                    <span class="new_car_flagtip">商务待客的不二之选</span>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="new_product">
        <div class="index_new_car_title">
            <span>车主故事</span>
        </div>
        <div class="swiper-container car_owner_story" id="car_owner_story">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/cloth1.jpg">
                    <div>
                        <span class="car_owner_story_title">小个子女生的路虎梦</span>
                    </div>
                    <div>
                        <span class="car_owner_story_info">车主： 林女士·寿险规划师</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/cloth2.jpg">
                    <div>
                        <span class="car_owner_story_title">小个子女生的路虎梦</span>
                    </div>
                    <div>
                        <span class="car_owner_story_info">车主： 林女士·寿险规划师</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="images/cloth4.jpg">
                    <div>
                        <span class="car_owner_story_title">小个子女生的路虎梦</span>
                    </div>
                    <div>
                        <span class="car_owner_story_info">车主： 林女士·寿险规划师</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="new_product">
        <div class="index_new_car_title question_title_border">
            <span>弹弹问答</span>
        </div>
        <div class="question_answer">
            <div class="question_answer_container">
                <div class="index_question" id="index_question_1">
                    <div class="index_question_dot"><span></span></div>
                    <span class="index_question_words">弹个车的购车流程是怎样的呢？</span>
                    <i class="fa fa-angle-down"></i>
                    <div class="clearfix"></div>
                </div>
                <div class="index_answer hidden" id="index_answer_1">
                    <p>购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>1.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>2.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>3.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>4.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                </div>
            </div>
        </div>
        <div class="question_answer">
            <div class="question_answer_container">
                <div class="index_question" id="index_question_2">
                    <div class="index_question_dot"><span></span></div>
                    <span class="index_question_words">弹个车的购车流程是怎样的呢？</span>
                    <i class="fa fa-angle-down"></i>
                    <div class="clearfix"></div>
                </div>
                <div class="index_answer hidden" id="index_answer_2">
                    <p>购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>1.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>2.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>3.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                    <p>4.购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程购车流程</p>
                </div>
            </div>
        </div>
        <div class="question_answer_more">
            <a href="#">查看更多</a>
        </div>
    </div>

    <div class="bottom_logo">
        <img src="images/logo_che.png">
    </div>

</div>

<div class="index_footer">
    <div class="index_footer_option">
        <a href="#" class="active">
            <i class="fa fa-home"></i>
            <span>首页</span>
        </a>
    </div>
    <div class="index_footer_option">
        <a href="#">
            <i class="fa fa-car"></i>
            <span>新车</span>
        </a>
    </div>
    <div class="index_footer_option">
        <a href="#">
            <i class="fa fa-handshake-o"></i>
            <span>车主服务</span>
        </a>
    </div>
    <div class="index_footer_option">
        <a href="#">
            <i class="fa fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</div>

</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.2.1.1min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var mySwiper = new Swiper ('#index_top_slide', {
            loop: true,
            autoplay : 3000,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable :true

        });
        var mySwiper = new Swiper ('#first_pay_slide', {
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable :true

        });
        var mySwiper = new Swiper ('#car_owner_story', {
            slidesPerView : 1.3,
            spaceBetween : 10
        });
        $("#index_question_1").click(function(){
            $("#index_answer_1").slideToggle();
            $("#index_question_1 .fa").toggleClass("fa-angle-down");
            $("#index_question_1 .fa").toggleClass("fa-angle-up");
        });
        $("#index_question_2").click(function(){
            $("#index_answer_2").slideToggle();
            $("#index_question_2 .fa").toggleClass("fa-angle-down");
            $("#index_question_2 .fa").toggleClass("fa-angle-up");
        })
    })
</script>
</html>